<template>
	<view>
		<view v-if="!vuex_isMobile" :class="pageScroll?'p9-section-active': 'p9-section'"
			style="width: 100vw;background-color: #fff;">
			<view class="title-div">
				<view class="head-logo" @click="clickLogo">
					<image src="/static/logo/logo.png" mode="widthFix" style="width: 300px;height: 72px;"></image>
				</view>
				<view class="head-menu">
					<view v-for="(item,index) in tabs" :key="index" @click="onTabs(item)"
						@mouseenter="changeActive(item)" @mouseleave="removeTabs()">
						<view :class="vuex_activeOneMenuName == item.id || item.border?'menu-item-active':'menu-item'">
							<view class="flex-row flex-align">
								<text>{{item.name}}</text>
								<image src="/static/pgup.png" mode="widthFix" style="width: 12px;margin-left: 5px;"
									v-if="item.name == '产品介绍' && !popup"></image>
								<image src="/static/pgdu.png" mode="widthFix" style="width: 12px;margin-left: 5px;"
									v-if="item.name == '产品介绍' && popup"></image>
							</view>
							<view class="head-border" v-if="vuex_activeOneMenuName == item.id || item.border"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="mobile">
			<view @click="clickLogo">
				<image src="/static/logo/logo.png" mode="widthFix" style="width: 545px;height: 130px;"></image>
			</view>
			<view @click="showMenu()">
				<uni-icons type="bars" size="54px"></uni-icons>
			</view>
		</view>
		<uni-drawer ref="showRight" mode="right" :width="600">
			<view class="drawer-box">
				<view class="drawer-box-item" v-for="(item,index) in tabs" :key="index" @click="onTabs(item)"
					@mouseenter="changeActive(item)" @mouseleave="removeTabs()">
					<text>{{item.name}}</text>
				</view>
			</view>
		</uni-drawer>
	</view>

</template>

<script>
	import {
		getTopMenu,
		getMenu
	} from "@/common/api.js";
	/**
	 * 程序启动页
	 * */
	export default {
		data() {
			return {
				tabs: [],
				pageScroll: false,
			}
		},
		mounted() {
			this.getTopMenuList()
			uni.$on('activeTo', (data) => {
				for (var i in this.tabs) {
					if (data == this.tabs[i].id) {
						uni.setStorageSync('activeOneMenuName', this.tabs[i].id)
						this.$u.vuex('vuex_activeOneMenuName', this.tabs[i].id)
						uni.setStorageSync('activeTopOneMenuName', this.tabs[i].name)
						this.tabs[i]['checked'] = true
					} else {
						this.tabs[i]['checked'] = false
					}
				}
			})

			var that = this;
			// uni.$on('id', (data) => {
			// 	if (data == 5) {
			// 		for (var i in that.tabs) {
			// 			if (i == 5) {
			// 				that.tabs[5]['checked'] = true
			// 			} else {
			// 				that.tabs[i]['checked'] = false
			// 			}
			// 		}
			// 	} else if (data == 0) {
			// 		for (var i in that.tabs) {
			// 			that.tabs[i]['checked'] = false
			// 		}
			// 	}
			// })
			uni.$on('onPageScroll', function(data) {
				if (data != 0) {
					that.pageScroll = true
				} else {
					that.pageScroll = false
				}
			});
		},
		methods: {
			showMenu() {
				this.$refs.showRight.open()
			},
			getTopMenuList() {
				getTopMenu().then(res => {
					res.data.unshift({
						name: '首页',
						border: false,
						id: 999
					})
					res.data = res.data.map(item => {
						return {
							checked: false,
							border: false,
							...item
						}
					})
					this.tabs = res.data
					uni.setStorageSync('tabs', res.data)
					let activeOneMenuName = uni.getStorageSync('activeOneMenuName')
					if (activeOneMenuName) {
						for (var i in this.tabs) {
							if (activeOneMenuName == this.tabs[i]['id']) {
								this.tabs[i]['checked'] = true
							} else {
								this.tabs[i]['checked'] = false
							}
						}
					}
				})
			},
			// 鼠标点击tabs菜单
			onTabs(item) {
				this.$refs.showRight.close()
				if (item.name == '加入我们') {
					window.open('https://yinfenggroup1.zhiye.com')
					return false
				}
				uni.setStorageSync('activeOneMenuName', item.id)
				this.$u.vuex('vuex_activeOneMenuName', item.id)
				uni.setStorageSync('activeTopOneMenuName', item.name)
				for (var i in this.tabs) {
					if (item.name == this.tabs[i]['name']) {
						this.tabs[i]['checked'] = true
					} else {
						this.tabs[i]['checked'] = false
					}
				}
				if (item.name == '首页') {
					uni.navigateTo({
						url: '/pages/index'
					})
				} else {
					getMenu({
						parentId: item.id
					}).then(response => {
						uni.navigateTo({
							url: '/pages/content?active=' + item.id,
							success: function(res) {
								uni.setStorageSync('activeMenu', response.data)
								// 通过eventChannel向被打开页面传送数据
								res.eventChannel.emit('pageData', {
									data: response.data
								})
							}
						})
					})
				}
			},
			// 鼠标移入tabs菜单
			changeActive(item) {
				for (var i in this.tabs) {
					if (item.name == this.tabs[i]['name']) {
						this.tabs[i]['border'] = true
					} else {
						this.tabs[i]['border'] = false
					}
				}
			},
			// logo点击事件
			clickLogo() {
				for (var i in this.tabs) {
					if (i == 0) {
						this.tabs[0]['checked'] = true
					} else {
						this.tabs[i]['checked'] = false
					}
				}
				uni.navigateTo({
					url: '/pages/index'
				})
			},
			// 鼠标移出tab菜单
			removeTabs() {
				for (var i in this.tabs) {
					this.tabs[i]['border'] = false
				}
			},
			// 鼠标移出二级菜单
			removeActive() {
				this.popup = false
			},
			// 鼠标点击二级菜单栏目事件
			openPage(url) {
				for (var i in this.tabs) {
					this.tabs[i]['checked'] = false
				}
				this.tabs[1]['checked'] = true
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mobile {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 72px;
		background-color: #fff;
	}

	.drawer-box {
		width: 100%;
		height: 100%;
		background-color: #193F93;
		
		.drawer-box-item {
			line-height: 178px;
			border-bottom: 2px solid #758CFF;
			font-weight: 500;
			font-size: 47px;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.p9-section {
		display: flex;
		justify-content: center;
	}

	.p9-section-active {
		box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.15);
		display: flex;
		justify-content: center;
	}

	.title-div {
		// width: 100%;
		background-color: #fff;
		padding-bottom: 10px;
	}

	.head-logo {
		// margin-left: 360px;
		padding-top: 20px;
	}

	.head-menu {
		width: 100%;
		margin-top: 20px;
		// margin-left: 360px;
		display: flex;
		align-items: center;
	}

	.menu-item-active {
		width: 110px;
		line-height: 48px;
		display: flex;
		align-items: center;
		flex-direction: column;
		cursor: pointer;

		text {
			color: #193F93;
			font-size: 18px;
		}
	}

	.menu-item:hover {
		color: #193F93;
	}

	.menu-item {
		width: 110px;
		line-height: 48px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;

		text {
			font-size: 18px;
			color: #686868;
		}
	}

	.head-border {
		width: 30%;
		height: 1px;
		background-color: $maincolor;
	}

	.head-help {
		width: 260px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.head-phone {
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.head-rule {
		height: 15px;
		border-right: 2px solid #e7e7e7;
	}

	.head-btn {
		width: 100px;
		height: 35px;
		background-color: $maincolor;
		border-radius: 4px;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.head-btn:hover {
		background-color: #2999FBBF;
	}

	@-webkit-keyframes fadeIn {
		0% {
			opacity: 0;
			/*初始状态 透明度为0*/
		}

		50% {
			opacity: 0;
			/*中间状态 透明度为0*/
		}

		100% {
			opacity: 1;
			/*结尾状态 透明度为1*/
		}
	}

	@-webkit-keyframes fadeOut {
		0% {
			opacity: 0;
			/*初始状态 透明度为0*/
		}

		50% {
			opacity: 0;
			/*中间状态 透明度为0*/
		}

		100% {
			opacity: 1;
			/*结尾状态 透明度为1*/
		}
	}

	.popup-sty {
		width: 100%;
		padding: 35px 0;
		border-top: 1px solid #EEEEEE;
		box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.15);
		background-color: #fff;
		position: fixed;
		top: 1;
		-webkit-animation-name: fadeIn;
		/*动画名称*/
		-webkit-animation-duration: 0.5s;
		/*动画持续时间*/
		-webkit-animation-iteration-count: 1;
		/*动画次数*/
		-webkit-animation-delay: 0s;
		/*延迟时间*/
		cursor: pointer;
	}

	.popup-title {
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #EEEEEE;

		text {
			color: #666666;
			font-size: 16px;
		}
	}

	.popup-padding {
		padding-top: 20px;
	}

	.popup-item {
		width: 140px;
		margin: 15px 0;
		display: flex;
		align-items: center;

		text {
			font-size: 18px;
			color: #666666;
		}
	}

	.popup-item:hover {

		background-color: #d1e7fbbf;
	}
</style>